<template>
	<view>
		<view class="aa"></view>
		<!-- 如果车辆数据为空，显示第一个页面 -->
		<view v-if="vehicles.length === 0" class="no-vehicles">
			<image src="@/static/cheliang.png" mode="aspectFill" class="car-image" />

		</view>

		<!-- 如果车辆数据不为空，显示第二个页面 -->
		<view v-else class="vehicles-list">
			<view v-for="(vehicle, index) in vehicles" :key="index" class="vehicle-item">
				<text>Vehicle ID: {{ vehicle.id }}</text>
				<text>Model: {{ vehicle.model }}</text>
				<text>Year: {{ vehicle.year }}</text>
				<text>Status: {{ vehicle.status }}</text>

				<!-- 设置为默认车辆按钮 -->
				<button class="default-btn" @click="setDefault(vehicle)">Set as Default</button>

				<!-- 删除车辆按钮 -->
				<button class="delete-btn" @click="deleteVehicle(index)">Delete Vehicle</button>
			</view>
		</view>

		<!-- 添加车辆按钮 -->
		<button class="add-vehicle-btn" @click="goToAddVehicle">+ 添加车辆</button>
	</view>

</template>

<script>
export default {
	data() {
		return {
			// 模拟车辆数据
			vehicles: [
				{ id: 1, model: "Car Model A", year: 2020, status: "Available", isDefault: false },
				{ id: 2, model: "Car Model B", year: 2019, status: "In use", isDefault: false }
			]
		}
	},
	methods: {
		// 跳转到添加车辆页面
		goToAddVehicle() {
			uni.navigateTo({
				url: '/pages/shihao/add-vehicle/add-vehicle', // 跳转到车辆选择页面
				success: (res) => {
					// 向目标页面传递事件通道
					res.eventChannel.emit('sendData', { message: 'Hello from index page' });
				}
			});
		},
		// 接收来自添加车辆页面的数据
		onReceiveData() {
			const pages = getCurrentPages(); // 获取当前页面栈
			const currentPage = pages[pages.length - 1]; // 获取当前页面
			const eventChannel = currentPage.eventChannel;
			eventChannel.on('acceptData', (data) => {
				console.log(data); // 在控制台打印接收到的数据
				if (data && data.newVehicle) {
					this.vehicles.push(data.newVehicle); // 将新车添加到车辆列表中
				}
			});
		},
		// 设置默认车辆
		setDefault(vehicle) {
			this.vehicles.forEach(v => {
				v.isDefault = false; // 重置所有车辆的默认状态
			});
			vehicle.isDefault = true; // 设置当前车辆为默认车辆
		},
		// 删除车辆
		deleteVehicle(index) {
			this.vehicles.splice(index, 1); // 从数组中删除车辆
		}
	},
	onLoad() {
		this.onReceiveData(); // 监听并处理返回的数据
	}
}

</script>

<style>
.aa {
	background-color: #2E80FA;
	height: 260rpx;
	width: 100%;
}

.no-vehicles {
	margin-top: 50px;
	background-color: white;
	width: 90%;
	height: 1050rpx;
	border-radius: 10rpx;
	margin-top: -230rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 5%;
}

.no-vehicles image {
	width: 500rpx;
	height: 500rpx;
}

.car-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 20rpx;
}

.vehicles-list {
	margin-top: 20rpx;
}

.vehicle-item {
	padding: 20rpx;
	margin-bottom: 10rpx;
	border: 1px solid #ccc;
	border-radius: 10px;
}

.vehicle-item text {
	display: block;
	margin-bottom: 5rpx;
}

/* 设置为默认车辆按钮 */
.default-btn {
	background-color: #28a745;
	color: white;
	padding: 8rpx 16rpx;
	margin-top: 10rpx;
	border-radius: 4rpx;
	font-size: 26rpx;
	width: 100%;
}

/* 删除车辆按钮 */
.delete-btn {
	background-color: #dc3545;
	color: white;
	padding: 8rpx 16rpx;
	margin-top: 10rpx;
	border-radius: 4rpx;
	font-size: 26rpx;
	width: 100%;
}

/* 添加车辆按钮 */
.add-vehicle-btn {
	position: fixed;
	left: 50%;
	bottom: 30rpx;
	transform: translateX(-50%);
	background-color: #007AFF;
	color: white;
	padding: 10rpx 20rpx;
	border-radius: 25rpx;
	font-size: 28rpx;
	width: 90%;
	font-weight: bold;
}
</style>
